<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				background: seagreen;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>

	<body>
		<canvas id="myCan" width="800" height="800">
			您的浏览器不支持canvas，请升级浏览器！
		</canvas>
		<div class="box"></div>
		<script>
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			var timer = null;
			var w = 0;
			var h = 0;


			var oImg = new Image()
			oImg.src = '../images/run.png';
			oImg.onload = function() {
				timer = setInterval(function() {
					ctx.clearRect(0, 0, 800, 800);
					if (w > 1660) {
						w = 0
					}
					ctx.drawImage(oImg, w, 0, 128, 128, 100, 100, 700, 700);
					w += 128;
				}, 0.1);
			}
		</script>
	</body>

</html>
